<template>
  <view class="main">
    <view class="box">
      <view class="goods">
        <view class="goods-box">
          <image class="cover" src="/static/images/star.png"></image>
          <view class="info">
            <view class="row">
              <view class="text name">商品名称商品商品名称商品名称</view>
              <view class="text status">已上架</view>
            </view>
            <view class="row">
              <view class="text sales_count">已售：0</view>
              <view class="text price">￥10.00</view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view class="btn edit">编辑</view>
        <view class="btn upper">上架/下架</view>
        <view class="btn del">删除</view>
      </view>
    </view>
    <view class="box">
      <view class="goods">
        <view class="goods-box">
          <image class="cover" src="/static/images/star.png"></image>
          <view class="info">
            <view class="row">
              <view class="text name">商品名称商品商品名称商品名称</view>
              <view class="text status">已上架</view>
            </view>
            <view class="row">
              <view class="text sales_count">已售：0</view>
              <view class="text price">￥10.00</view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view class="btn edit">编辑</view>
        <view class="btn upper">上架/下架</view>
        <view class="btn del">删除</view>
      </view>
    </view>
    <view class="box">
      <view class="goods">
        <view class="goods-box">
          <image class="cover" src="/static/images/star.png"></image>
          <view class="info">
            <view class="row">
              <view class="text name">商品名称商品商品名称商品名称</view>
              <view class="text status">已上架</view>
            </view>
            <view class="row">
              <view class="text sales_count">已售：0</view>
              <view class="text price">￥10.00</view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view class="btn edit">编辑</view>
        <view class="btn upper">上架/下架</view>
        <view class="btn del">删除</view>
      </view>
    </view>

  </view>

</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad: function (options) {
  },

  methods: {},

}
</script>

<style lang="scss">
.main {
  display: flex;
  flex-direction: column;

  .box{
    margin-bottom: 20rpx;
    .goods {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      padding: 0 20rpx;

      .goods-box {
        display: flex;
        width: 100%;
        padding: 20rpx 0;

        .cover {
          width: 140rpx;
          height: 140rpx;
          object-fit: cover;
          margin-right: 20rpx;
        }

        .info {
          display: flex;
          width: 100%;
          flex-direction: column;
          justify-content: space-between;

          .row {
            display: flex;
            justify-content: space-between;
            white-space: nowrap;

            .name {
              font-size: 32rpx;
              font-weight: bold;
              width: 400rpx;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .status {
              color: #ec0808;
            }

            .price {
              color: #f59608;
            }
          }
        }
      }
    }
    .btn-box {
      display: flex;
      justify-content: space-between;

      .btn {
        flex: 1;
        text-align: center;
        padding: 20rpx 0;
        color: #fff;
      }

      .edit {
        background-color: #4cd964;
      }

      .upper {
        background-color: #ec9205;
      }

      .del {
        background-color: #e11212;
      }
    }
  }
}
</style>

